<!-- 票据详情 -->
<template>
    <div>
        <div class="rem-dialog-con order-form-box">
            <el-form label-width="100px">
                <el-row>
                    <el-col :span="24" class="form-title">
                        <div class="form-title-con">
                            票据图片
                        </div>
                    </el-col>
                    <el-col :span="24" class="bill_img_box">
                        <div>
                            <div class="bill_detail_img">
                                <ImageZoom :width='240' :height='148' :image="this.billModel.bill_front_photo_path" v-if="billModel.bill_front_photo_id != ''"></ImageZoom>
                            </div>
                            <div>票据正面</div>
                        </div>
                        <div>
                            <div class="bill_detail_img">
                                <ImageZoom :width='240' :height='148' :image="this.billModel.bill_back_photo_path1" v-if="billModel.bill_back_photo_path1 != '' && billModel.bill_back_photo_path1 != undefined && billModel.bill_back_photo_path1 != null"></ImageZoom>
                            </div>
                            <div>票据背书面1</div>
                        </div>
                        <div>
                            <div class="bill_detail_img">
                                <ImageZoom :width='240' :height='148' :image="this.billModel.bill_back_photo_path2" v-if="billModel.bill_back_photo_path2 != '' && billModel.bill_back_photo_path2 != undefined && billModel.bill_back_photo_path2 != null"></ImageZoom>
                            </div>
                            <div>票据背书面2</div>
                        </div>
                    </el-col>
                    <el-col :span="24" class="bill_img_box" v-if="billModel.bill_style_id != 305">
                        <div>
                            <div class="bill_detail_img">
                                <ImageZoom :width='240' :height='148' :image="bill_front_photo_path_tu" v-if="billModel.bill_front_photo_path != '' && billModel.bill_front_photo_path != undefined && billModel.bill_front_photo_path != null"></ImageZoom>
                            </div>
                            <div>票据正面涂抹后</div>
                        </div>
                        <div>
                            <div class="bill_detail_img">
                                <ImageZoom :width='240' :height='148' :image="bill_back_photo_path1_tu" v-if="billModel.bill_back_photo_path1 != '' && billModel.bill_back_photo_path1 != undefined && billModel.bill_back_photo_path1 != null"></ImageZoom>
                            </div>
                            <div>票据背书面1涂抹后</div>
                        </div>
                        <div>
                            <div class="bill_detail_img">
                                <ImageZoom :width='240' :height='148' :image="bill_back_photo_path2_tu" v-if="billModel.bill_back_photo_path2 != '' && billModel.bill_back_photo_path2 != undefined && billModel.bill_back_photo_path2 != null"></ImageZoom>
                            </div>
                            <div>票据背书面2涂抹后</div>
                        </div>
                    </el-col>
                    <el-col :span="24" class="form-title">
                        <div class="form-title-con">
                            票面信息
                        </div>
                    </el-col>
                    <el-col :span="12" class="text_left">
                        <el-form-item label="票据号：">
                            <span>{{this.billModel.bill_number}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="text_left">
                        <el-form-item label="票面金额：">
                            <span>{{this.billModel.bill_sum_price}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="text_left">
                        <el-form-item label="承兑人行号：">
                            <span>{{this.billModel.acceptor_name}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="text_left">
                        <el-form-item label="承兑人：">
                            <span>{{this.billModel.acceptor_name}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="text_left">
                        <el-form-item label="到期日：">
                            <span>{{this.billModel.bill_deadline_time}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="text_left" v-if="billModel.bill_style_id != 305">
                        <el-form-item label="背书次数：">
                            <span>{{this.billModel.endorsement_number}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="text_left" v-if="billModel.bill_style_id != 305">
                        <el-form-item label="电票所在户：">
                            <span>{{this.billModel.account_information.bank_name}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="text_left" v-if="billModel.bill_style_id != 305">
                        <el-form-item label="瑕疵情况：">
                            <span>{{formatBillArr}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" class="text_left">
                        <el-form-item label="承兑机构：">
                            <span>{{this.billModel.acceptor_type_name}}</span>
                        </el-form-item>
                    </el-col>
                    <div v-if="billModel.bill_product_id != null && billModel.bill_product_id != '' && billModel.bill_style_id != 305">
                        <el-col :span="24" class="form-title">
                            <div class="form-title-con">
                                询价信息
                            </div>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="竞价方式：">
                                <span>{{this.billModel.bidding_mode_name}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="发布期限：">
                                <span>T+{{this.billModel.trade_appoint_day}}</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="期望贴息：">
                                <span>{{this.billModel.hope_discount_interest}}元</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="每十万扣：">
                                <span>{{this.billModel.every_plus_interest}}元</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text_left">
                            <el-form-item label="期望贴息额：">
                                <span>{{this.billModel.hope_deal_price}}元</span>
                            </el-form-item>
                        </el-col>
                    </div>
                    <el-col :span="24" class="form-title">
                        <div class="form-title-con">
                            发布企业信息
                        </div>
                    </el-col>
                    <el-col :span="8" class="text_left">
                        <el-form-item label="企业名称：">
                            <span>{{this.billModel.drawer_name}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" class="text_left">
                        <el-form-item label="联系人：">
                            <span>{{this.billModel.contact_name}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" class="text_left">
                        <el-form-item label="手机号：">
                            <span>{{this.billModel.contact_phone}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="form-title">
                        <div class="form-title-con">
                            备注信息
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <div class="order_operator_record">
                            <div class="order_record_title">审核备注</div>
                            <ul>
                                <li v-for="item in this.billModel.bill_check_list" :key="item.id">
                                    {{item.checked_time}}<span style="margin-left: 12px;">{{item.checker_name}}&nbsp;反馈&nbsp;{{item.description}}</span>
                                </li>
                            </ul>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <span slot="Remfooter" class="submit-btn">
            <el-button type="info" size="small" @click="closeDialog()">关闭</el-button>
        </span>
    </div>

</template>

<script lang="ts">
    import { Vue, Component, Prop } from 'vue-property-decorator';
    import ImageZoom from '@/component/common/ImageZoom.vue'
    import { getEndorsementFileName1 } from '@/util/format'
    @Component({
        components: {
            ImageZoom
        }
    })
    export default class BillDetail extends Vue {
        @Prop() billModel: any;
        get formatBillArr () {
            return this.billModel.bill_flaw_names ? this.billModel.bill_flaw_names.join('，') : ''
        }
        get bill_front_photo_path_tu () {
            if (!this.billModel.bill_front_photo_path || this.billModel.bill_front_photo_path == undefined || this.billModel.bill_front_photo_path == null) {
                return ''
            }
            return getEndorsementFileName1(this.billModel.bill_front_photo_path)
        }
        get bill_back_photo_path1_tu () {
            if (!this.billModel.bill_back_photo_path1 || this.billModel.bill_back_photo_path1 == undefined || this.billModel.bill_back_photo_path1 == null) {
                return ''
            }
            return getEndorsementFileName1(this.billModel.bill_back_photo_path1)
        }
        get bill_back_photo_path2_tu () {
            if (!this.billModel.bill_back_photo_path2 || this.billModel.bill_back_photo_path2 == undefined || this.billModel.bill_back_photo_path2 == null) {
                return ''
            }
            return getEndorsementFileName1(this.billModel.bill_back_photo_path2)
        }
        closeDialog () {
            this.$emit('closeDialog','')
        }
        mounted () {

        }
    }
</script>

<style lang="scss" scoped>
    .order_operator_record {
        margin-left: 50px;
    }
    .remind_color {
        color: $__color-remind;
    }
    .order_operator_record {
        ul {
            li {
                list-style: none;
                text-align: left;
                height: 26px;
                line-height: 26px;
                &:before{
                    content: '';
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    background: $__color-primary;
                    border-radius: 50%;
                    margin-right: 4px;
                    margin-bottom: 2px;
                }
            }
        }
    }
    .order_record_title {
        text-align: left;
        padding-left: 20px;
        color: $__color-label;
    }
    .submit-btn {
        display: flex;
        justify-content: center;
    }
</style>